<template>
  <view class="container">
    <view class="header">
      <text class="title">🎵 音频测试</text>
    </view>

    <view class="test-section">
      <view class="test-item">
        <text class="test-label">经典闹钟</text>
        <button class="test-btn" @click="testRingtone('classic')">测试</button>
      </view>
      
      <view class="test-item">
        <text class="test-label">温和提醒</text>
        <button class="test-btn" @click="testRingtone('gentle')">测试</button>
      </view>
      
      <view class="test-item">
        <text class="test-label">紧急警报</text>
        <button class="test-btn" @click="testRingtone('urgent')">测试</button>
      </view>
      
      <view class="test-item">
        <text class="test-label">自然鸟鸣</text>
        <button class="test-btn" @click="testRingtone('bird')">测试</button>
      </view>
    </view>

    <view class="control-section">
      <button class="stop-btn" @click="stopAudio">停止播放</button>
      <button class="back-btn" @click="goBack">返回</button>
    </view>

    <view class="info-section">
      <text class="info-text">{{ statusText }}</text>
    </view>
  </view>
</template>

<script>
import audioManager from "@/utils/audioManager.js";

export default {
  data() {
    return {
      statusText: "点击按钮测试不同的铃声效果"
    };
  },
  methods: {
    async testRingtone(type) {
      const typeNames = {
        classic: "经典闹钟",
        gentle: "温和提醒", 
        urgent: "紧急警报",
        bird: "自然鸟鸣"
      };
      
      this.statusText = `正在播放: ${typeNames[type]}`;
      
      try {
        await audioManager.playRingtone(type, 5);
        this.statusText = `${typeNames[type]} 播放完成`;
      } catch (error) {
        console.error('播放失败:', error);
        this.statusText = `播放失败: ${error.message}`;
      }
    },
    
    stopAudio() {
      audioManager.stopPlaying();
      this.statusText = "已停止播放";
    },
    
    goBack() {
      uni.navigateBack();
    }
  }
};
</script>

<style scoped>
.container {
  min-height: 100vh;
  background-color: #f6f8fb;
  padding: 30rpx;
}

.header {
  text-align: center;
  margin-bottom: 40rpx;
}

.title {
  font-size: 40rpx;
  font-weight: 600;
  color: #333;
}

.test-section {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.test-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.test-item:last-child {
  border-bottom: none;
}

.test-label {
  font-size: 32rpx;
  color: #333;
}

.test-btn {
  background-color: #007aff;
  color: #fff;
  border-radius: 25rpx;
  padding: 15rpx 30rpx;
  font-size: 28rpx;
}

.control-section {
  display: flex;
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.stop-btn {
  flex: 1;
  background-color: #ff4757;
  color: #fff;
  border-radius: 25rpx;
  padding: 20rpx;
  font-size: 30rpx;
}

.back-btn {
  flex: 1;
  background-color: #666;
  color: #fff;
  border-radius: 25rpx;
  padding: 20rpx;
  font-size: 30rpx;
}

.info-section {
  background-color: #fff;
  border-radius: 15rpx;
  padding: 25rpx;
  text-align: center;
}

.info-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
}
</style>